<template>
  <div>
    <a-cascader 
      v-model="selectedValue"
      :options="options"
      @change="handleChange"
      :changeOnSelect="changeOnSelect"
      :disabled="disabled"
      :placeholder="placeholder"
      :showSearch="{filter: doFilter}"
      :size="size"
      :allowClear="allowClear"
    />
  </div>
</template>
<script>
export default {
  created() {
    this.fetch()
  },
  watch: {
    value(){
      this.selectedValue = this.value
    },
    filters() {
      this.fetch()
    },
    dicts() {
      this.fetch()
    }
  },
  props: {
    value: { type: [Array], default: () => { return [] } },
    dictCode: { type: [String] },
    placeholder: { type: [String] },
    disabled: { type: [Boolean] },
    allowClear: { type: [Boolean], default: true },
    i18n: { type: [Boolean], default: true },
    filters: { type: [Object], default: () => { return {} } },
    include: { type: [Boolean], default: true },
    changeOnSelect: { type: [Boolean], default: true },
    active: { type: [Boolean], default: true },
    size: { type: [String], default: 'default' },
  },
  data() {
    return {
      selectedValue: this.value,
      options: [],
    }
  },
  computed: {
    dicts() {
      return this.$store.state.dicts[this.dictCode] || []
    }
  },
  methods: {
    doFilter(inputValue, path) {
      return path.some(
        option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
      )
    },
    fetch () {
      let topNode = this.getTopNode()
      this.fillChildNode(topNode)
      this.options = topNode
    },
    fillChildNode(topNode) {
      topNode.forEach(item => {
        let children = this.getChildNode(item)
        if (children && children.length > 0) {
          item.children = children
          this.fillChildNode(children)
        }
      })
    },
    getChildNode(parentNode) {
      let dictCode = parentNode.dictCode
      let itemCode = parentNode.value
      let dicts = this.$store.state.dicts
      let result = []
      for(let key in dicts) {
        dicts[key].forEach(dict =>{
          if (dict.parentDictCode == dictCode && dict.parentItemCode == itemCode) {
            if (this.filterByDictCodeDictItem(dict.dictCode, dict.itemCode, dict.isActive)) {
              let label = dict.itemName
              if (this.i18n) {
                label = dict.itemNameI18n[localStorage.locale]
              }
              result.push({
                value: dict.itemCode,
                label: label,
                dictCode: dict.dictCode,
              })
            }
          }
        })
      }
      return result
    },
    getTopNode() {
      let dicts = this.dicts
      let result = []
      dicts = dicts.filter(item =>{
        return this.filterByDictCodeDictItem(this.dictCode, item.itemCode, item.isActive)
      })
      dicts.forEach(dict => {
        let label = dict.itemName
        if (this.i18n) {
          label = dict.itemNameI18n[localStorage.locale]
        }
        result.push({
          value: dict.itemCode,
          label: label,
          dictCode: dict.dictCode,
        })
      })
      return result
    },
    filterByDictCodeDictItem(dictCode, itemCode, isActive) {
      if (this.active) {
        if (!isActive) {
          return false
        }
      }
      
      let list = this.filters[dictCode]
      if (!list || list.length == 0) {
        return true
      }

      if (list.includes(itemCode)) {
        if (this.include) {
          return true
        }
      } else {
        if (!this.include) {
          return true
        }
      }

      return false
    },
    handleChange(val) {
      // Should provide an event to pass value to Form.
      this.$emit('change', val)
    },
  }
}
</script>
